Yacon.component.ECharts = function(conText){
	
	Yacon.apply(this,conText);
	
	if(this.view){
		this.element = this.view;
		this.elementID = this.view.id;
		this.elementType = this.view.type;
	}
	
	this.dataSet = new Yacon.data.DataSet(this.page);
	this.dataSet.component = this;
	this.dataSet.elementID = this.elementID;
	this.dataSet.refreshMethod = this.view.refresh;
	
};

Yacon.component.ECharts.prototype = {
	
	getHtml: function(){
		
		var html = "";
		
		html += "<div class='row-ht-auto' style='width:100%;height:100%' ";		
		html += " lily-id='"+this.elementID+"' lily-type='"+this.elementType+"' ";	
		html += " >";
		
		html += "<div id='"+this.elementID+"' style='width:100%;height:100%'></div>";
		
		html += "</div>";
		
		return html;
		
	},
	
	addEvents: function(){
		
		var search = this.page.element.search + " div[lily-id='"+this.elementID+"'][lily-type='"+this.elementType+"']";		
		this.charts = echarts.init(document.getElementById(this.elementID));  
		
		Yacon.callBack(this.elementID+"_beforeEvent", [this.page.element,this.page]);
		
		this.charts.setOption(this.view.option); 
		
		Yacon.callBack(this.elementID+"_afterEvent", [this.page.element,this.page]);
		
	},
	
	spinShow: function(){
	
	},
	
	spinHidden: function(){
		
	
	},
	
	refreshElement: function(){
		
		var html = "";
		
		this.view = this.dataSet.getDataValue();
		
		var search = this.page.element.search + " div[lily-id='"+this.elementID+"'][lily-type='"+this.elementType+"']";		

		$(search).empty();
		
		$(search).append("<div id='"+this.elementID+"' style='width:100%;height:100%'></div>");
		
		this.charts = echarts.init(document.getElementById(this.elementID));  
		
		Yacon.callBack(this.elementID+"_beforeRefresh", [this.page.element,this.page]);
		
		this.charts.setOption(this.view.option); 
		
		Yacon.callBack(this.elementID+"_afterRefresh", [this.page.element,this.page]);
		
	},
	
	refresh: function(){
		this.dataSet.refresh();
	},
	
	layoutBefore: function(){
		
	}
		
};